<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style type="text/css">
        #con{
            width: 220px;
            background-color: #01ffff;
        }

        div > ul > li {
            list-style-type: none;
        }

        .background {
            /* 默认不显示 */
            display: none;
        }
    </style>
    <script src="./../lib/jquery-3.7.0.min.js"></script>
</head>
<body>
<div id="con">
    <div>
        <ul>
            <li id="conscious">四个意识
                <ul class="background">
                    <li>政治意识</li>
                    <li>大局意识</li>
                    <li>核心意识</li>
                    <li>看齐意识</li>
                </ul>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li id="assertive">四个自信
                <ul class="background">
                    <li>中国特色社会主义道路自信</li>
                    <li>理论自信</li>
                    <li>制度自信</li>
                    <li>文化自信</li>
                </ul>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li id="comprehensive">四个全面
                <ul class="background">
                    <li>全面建设社会主义现代化国家</li>
                    <li>全面深化改革</li>
                    <li>全面依法治国</li>
                    <li>全面从严治党</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        /* 四个意识 */
        $("#conscious").hover(function () {
            $("#conscious>.background").slideToggle("slow");
        });

        /* 四个自信 */
        $("#assertive").hover(function () {
            $("#assertive>.background").slideToggle("slow");
        });

        /* 四个全面 */
        $("#comprehensive").hover(function () {
            $("#comprehensive>.background").slideToggle("slow");
        });
    })
</script>
</body>
</html>